<!doctype html>
<html>
<!-- Last updated:2020/02/17 -->
<head>
  <title>WebPicUpload - WebPicUpload.html</title>
  <meta charset="UTF-8">
  <meta name="Author" content="setycyas"> 
  <link rel="stylesheet" href="/static/bootstrap.min.css" type="text/css" />
  <link rel="stylesheet" href="/static/common_style.css" type="text/css" />
  <!--common_style.css是自定义的基本模板页css,每个应用还应该自定义一个css-->
  <script src="/static/jquery.min.js"></script>
  <!--<script src="bootstrap.min.js"></script>-->
  <script src="/static/poster.js"></script>
  <script>

    var uploadPoster = new SimplePoster(
      'WebPicUpload',
      'upload',
      (respData) => {
        $('#postRespon').html(respData['msg']);
      }
    );

    var uploadThreadObserver = new ThreadObserver(
      'WebPicUpload',
      'WebPicUploadThread',
      1000,
      (status) => {
        $('#threadStatus').html(status['status']['msg'])}
      ,
      (status) => {
        $('#threadStatus').html(status['result']);
      }
    );

    function uploadBtnClick(){
      // 制作上传到后段的数据
      data = {
        'files': $('#text').val().trim(),
        'tags': $('#tags').val().trim(),
        'domain': $('#domain').val(),
        'type': $('#type').val().trim()
      }
      if (data['type'].length == 0){
        data['type'] = 'default';
      }
      // 下之前确认
      if(!confirm('确定要上传?')){
          return;
      }
      /* post下载命令,开启线程监视器 */
      uploadPoster.post(data);
      uploadThreadObserver.start();
    }
    
    
  </script>
</head>

<body><div class="container">

  <h2>图片上传页面</h2>
  <label class="control-label">这里输入分类名:</label>
  <input type="text" id="type" class='form-control' 
    style= 'width:200px;border:1px solid green' placeholder="default" />
  <label class="control-label">这里输入标签,用英文逗号分隔:</label>
  <input type="text" id="tags" class='form-control' 
    style='width:200px;border:1px solid green' 
    placeholder="标签1,标签2" />
  <label class="control-label">这里选择域名:</label>
  <select id="domain" class="form-control" style="width:200px;border:1px solid green">
    {% for domain in domains %}
      <option value="{{domain}}">{{domain}}</option>
    {% endfor %}
  </select>
  <label class="control-label">这里上传文件,每个一行:</label>
  <textarea id="text" class="form-control" style="width:600px;height:150px;border:1px solid green;"></textarea><br/>
  <input id="uploadBtn" class='btn btn-primary' type="button" value="上传" 
    onclick="uploadBtnClick();" /><br/>
  <label id="postRespon" class="control-label"></label><br/>
  <label id="threadStatus" class="control-label"></label><br/>

</div></body>

</html>